<template>
  <div>
    <div class="logo">
      <img v-show="this.fileName!=''" :src="this.fileName"  title="点击修改图片">
      <img v-show="this.fileName==''" src="../assets/logo.png"  title="点击修改图片">
      <input class="imgput" type="file" id='image'   @change.prevent.stop="setImg($event)"  >
    </div>
    <van-field
          v-model="phone"
          name="phone"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="passwd"
          type="password"
          name="passwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="getCode">获取验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="setReg">注册</van-button>
      </div>
    <div class="register"><router-link to="/logoin" tag="span">立即登录</router-link></div>
  </div>
</template>
<script>
import userHtpp from "../api/user";
import {Toast} from "vant";
export default {
  data() {
    return {
      code:'',
      phone: '',
      passwd: '',
      uuid:'',
      fileName:'',//用户修改的图片
    };
  },
  methods: {
    setImg(event){
      let files = event.target.files[0];
      this.fileName = this.getObjectUrl(files);
      // this.$store.commit('reg/setimgUrl',this.fileName)//将修改的图片路径保存在vuex中
    },
    getObjectUrl(file) {
      if(file==undefined){
        return
      }
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url
    },
    //获取code码
    getCode(){
      userHtpp.get('/wns/code').then(res=>{
        let {data}=res.data
        this.code=data.code;
        this.uuid=data.uuid;
      })
    },
    //注册状态
    setReg(){
      let obj={
        "code":this.code,
        "phone":this.phone,
        "passwd":this.passwd,
        "uuid":this.uuid,
        'fileName':this.fileName
      }
      //设置登录成功！
      if(obj.phone!==''&&obj.passwd!==''&&obj.fileName!=''){
        sessionStorage.setItem('user', JSON.stringify(obj))
        Toast('注册成功！')
        return
      }
      Toast('注册失败！')

      // userHtpp.post('/wns/registered',obj).then(res=>{
      //
      // })
    }
  },
};
</script>

<style scoped lang="less">
.imgput{opacity: 0.01;position: absolute;top: 50%;left: 50%;transform:translateX(-25%) translateY(-25%)}
.register{display: flex;justify-content:end;margin-right:20px;color: #646566;font-size: 14px;}
.logo{background: #fff;margin:20px 0;position:relative;left:50%;top:50%;width:30%;height:30%;border-radius:100%;transform:translateX(-50%);overflow: hidden;img{vertical-align:center;width:100%}}
</style>